<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->	<html> <!--<![endif]-->
<head>
    <!-- Basic -->
    <meta charset="utf-8">
    <title>Iris - 맞춤 복지 시스템</title>
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Iris - 맞춤 복지 시스템">
    <meta name="author" content="CKSquire">

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Web Fonts  -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">

    <!-- Libs CSS -->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
    <link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
    <link rel="stylesheet" href="vendor/isotope/jquery.isotope.css" media="screen">
    <link rel="stylesheet" href="vendor/mediaelement/mediaelementplayer.css" media="screen">

    <!-- Theme CSS -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/theme-elements.css">
    <link rel="stylesheet" href="css/theme-blog.css">
    <link rel="stylesheet" href="css/theme-shop.css">
    <link rel="stylesheet" href="css/theme-animate.css">

    <!-- Current Page CSS -->
    <link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
    <link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">

    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/theme-responsive.css" />

    <!-- Skin CSS -->
    <link rel="stylesheet" href="css/skins/default.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">

    <!-- Head Libs -->
    <script src="vendor/modernizr.js"></script>

    <!--[if IE]>
    <link rel="stylesheet" href="css/ie.css">
    <![endif]-->

    <!--[if lte IE 8]>
    <script src="vendor/respond.js"></script>
    <![endif]-->
</head>
<body>
<div class="body">
<header id="header">
<div class="container">
    <h1 class="logo">
        <a href="main.html">
            <img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" src="img/logo.png">
        </a>
    </h1>
    <div class="search">
        <form id="searchForm" action="#" method="get">
            <div class="input-group">
                <input type="text" class="form-control search" name="q" id="q" placeholder="Search...">
								<span class="input-group-btn">
									<button class="btn btn-default" type="submit"><i class="icon icon-search"></i></button>
								</span>
            </div>
        </form>
    </div>
    <nav>
        <ul class="nav nav-pills nav-top">
            <li>
                <a href="#"><i class="icon icon-angle-right"></i>CK스퀘어란?</a>
            </li>
            <li>
                <a href="#"><i class="icon icon-angle-right"></i>스터디하고 싶은 분?</a>
            </li>
            <li class="email">
                <span><i class="icon icon-envelope"></i>javacafe@gmail.com</span>
            </li>
        </ul>
    </nav>
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse">
        <i class="icon icon-bars"></i>
    </button>
</div>
<div class="navbar-collapse nav-main-collapse collapse">
    <div class="container">
        <ul class="social-icons">
            <li class="facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li>
            <li class="twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li>
            <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin">Linkedin</a></li>
        </ul>
        <nav class="nav-main mega-menu">
            <ul class="nav nav-pills nav-main" id="mainMenu">
                <li class="dropdown">
                    <a class="dropdown-toggle" href="#">
                        어르신 정보
                        <i class="icon icon-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">더위 쉼터</a></li>
                        <li><a href="#">노인정정보</a></li>
                        <li><a href="#">자치기관문화센터행사</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">
                        아이들 정보
                        <i class="icon icon-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">놀이터</a></li>
                        <li><a href="#">보건소</a></li>
                        <li><a href="#">어린이집</a></li>
                        <li><a href="#">긴급어린이 맡김 서비스</a></li>
                        <li><a href="#">자하철수유실</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle">
                        복지 정보
                        <i class="icon icon-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">자치기관문화센터행사</a></li>
                        <li><a href="#">미세먼지 주의보</a></li>
                        <li><a href="#">폭염주의보</a></li>
                        <li><a href="#">구청 트위터 페이스북 새소식</a></li>
                     </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>
</header>

<div role="main" class="main">
<div class="slider-container">
    <div class="slider" id="revolutionSlider">
        <ul>
            <li data-transition="fade" data-slotamount="13" data-masterspeed="300" >

                <img src="img/slides/slide-bg.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

                <div class="tp-caption sft stb visible-lg"
                     data-x="72"
                     data-y="180"
                     data-speed="300"
                     data-start="1000"
                     data-easing="easeOutExpo"><img src="img/slides/slide-title-border.png" alt=""></div>

                <div class="tp-caption top-label lfl stl"
                     data-x="122"
                     data-y="180"
                     data-speed="300"
                     data-start="500"
                     data-easing="easeOutExpo">DO YOU NEED A NEW</div>

                <div class="tp-caption sft stb visible-lg"
                     data-x="372"
                     data-y="180"
                     data-speed="300"
                     data-start="1000"
                     data-easing="easeOutExpo"><img src="img/slides/slide-title-border.png" alt=""></div>

                <div class="tp-caption main-label sft stb"
                     data-x="30"
                     data-y="210"
                     data-speed="300"
                     data-start="1500"
                     data-easing="easeOutExpo">WEB DESIGN?</div>

                <div class="tp-caption bottom-label sft stb"
                     data-x="80"
                     data-y="280"
                     data-speed="500"
                     data-start="2000"
                     data-easing="easeOutExpo">Check out our options and features.</div>

                <div class="tp-caption randomrotate"
                     data-x="800"
                     data-y="248"
                     data-speed="500"
                     data-start="2500"
                     data-easing="easeOutBack"><img src="img/slides/slide-concept-2-1.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="850"
                     data-y="200"
                     data-speed="400"
                     data-start="3000"
                     data-easing="easeOutBack"><img src="img/slides/slide-concept-2-2.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="820"
                     data-y="170"
                     data-speed="700"
                     data-start="3150"
                     data-easing="easeOutBack"><img src="img/slides/slide-concept-2-3.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="770"
                     data-y="130"
                     data-speed="1000"
                     data-start="3250"
                     data-easing="easeOutBack"><img src="img/slides/slide-concept-2-4.png" alt=""></div>

                <div class="tp-caption sfb"
                     data-x="500"
                     data-y="80"
                     data-speed="600"
                     data-start="3450"
                     data-easing="easeOutExpo"><img src="img/slides/slide-concept-2-5.png" alt=""></div>

                <div class="tp-caption blackboard-text lfb "
                     data-x="530"
                     data-y="300"
                     data-speed="500"
                     data-start="3450"
                     data-easing="easeOutExpo" style="font-size: 37px;">Think</div>

                <div class="tp-caption blackboard-text lfb "
                     data-x="555"
                     data-y="350"
                     data-speed="500"
                     data-start="3650"
                     data-easing="easeOutExpo" style="font-size: 47px;">Outside</div>

                <div class="tp-caption blackboard-text lfb "
                     data-x="580"
                     data-y="400"
                     data-speed="500"
                     data-start="3850"
                     data-easing="easeOutExpo" style="font-size: 32px;">The box :)</div>
            </li>
            <li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >

                <img src="img/slides/slide-bg.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

                <div class="tp-caption fade"
                     data-x="50"
                     data-y="100"
                     data-speed="1500"
                     data-start="500"
                     data-easing="easeOutExpo"><img src="img/slides/slide-concept.png" alt=""></div>

                <div class="tp-caption blackboard-text fade "
                     data-x="180"
                     data-y="180"
                     data-speed="1500"
                     data-start="1000"
                     data-easing="easeOutExpo" style="font-size: 30px;">easy to</div>

                <div class="tp-caption blackboard-text fade "
                     data-x="180"
                     data-y="220"
                     data-speed="1500"
                     data-start="1200"
                     data-easing="easeOutExpo" style="font-size: 40px;">customize!</div>

                <div class="tp-caption main-label sft stb"
                     data-x="580"
                     data-y="190"
                     data-speed="300"
                     data-start="1500"
                     data-easing="easeOutExpo">DESIGN IT!</div>

                <div class="tp-caption bottom-label sft stb"
                     data-x="580"
                     data-y="250"
                     data-speed="500"
                     data-start="2000"
                     data-easing="easeOutExpo">Create slides with brushes and fonts.</div>
            </li>
        </ul>
    </div>
</div>
<div class="home-intro">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <p>
                    The fastest way to grow your business with the leader in <em>Technology.</em>
                    <span>Check out our options and features included.</span>
                </p>
            </div>
            <div class="col-md-4">
                <div class="get-started">
                    <a href="#" class="btn btn-lg btn-primary">Get Started Now!</a>
                    <div class="learn-more">or <a href="index.html">learn more.</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row center">
        <div class="col-md-12">
            <h2 class="short word-rotator-title">
                Porto is
                <strong class="inverted">
									<span class="word-rotate">
										<span class="word-rotate-items">
											<span>incredibly</span>
											<span>especially</span>
											<span>extremely</span>
										</span>
									</span>
                </strong>
                beautiful and fully responsive.
            </h2>
            <p class="featured lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.
            </p>
        </div>
    </div>

</div>

<div class="home-concept">
    <div class="container">

        <div class="row center">
            <span class="sun"></span>
            <span class="cloud"></span>
            <div class="col-md-2 col-md-offset-1">
                <div class="process-image" data-appear-animation="bounceIn">
                    <img src="img/home-concept-item-1.png" alt="" />
                    <strong>Strategy</strong>
                </div>
            </div>
            <div class="col-md-2">
                <div class="process-image" data-appear-animation="bounceIn" data-appear-animation-delay="200">
                    <img src="img/home-concept-item-2.png" alt="" />
                    <strong>Planning</strong>
                </div>
            </div>
            <div class="col-md-2">
                <div class="process-image" data-appear-animation="bounceIn" data-appear-animation-delay="400">
                    <img src="img/home-concept-item-3.png" alt="" />
                    <strong>Build</strong>
                </div>
            </div>
            <div class="col-md-4 col-md-offset-1">
                <div class="project-image">
                    <div id="fcSlideshow" class="fc-slideshow">
                        <ul class="fc-slides">
                            <li><a href="portfolio-single-project.html"><img class="img-responsive" src="img/projects/project-home-1.jpg" /></a></li>
                            <li><a href="portfolio-single-project.html"><img class="img-responsive" src="img/projects/project-home-2.jpg" /></a></li>
                            <li><a href="portfolio-single-project.html"><img class="img-responsive" src="img/projects/project-home-3.jpg" /></a></li>
                        </ul>
                    </div>
                    <strong class="our-work">Our Work</strong>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container">

    <div class="row">
        <hr class="tall" />
    </div>

</div>

<div class="container">

    <div class="row">
        <div class="col-md-8">
            <h2>Our <strong>Features</strong></h2>
            <div class="row">
                <div class="col-md-6">
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-group"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Customer Support</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-file"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">HTML5 / CSS3 / JS</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-google-plus"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">500+ Google Fonts</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-adjust"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Colors</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-film"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Sliders</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-user"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Icons</h4>
                            <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-bars"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Buttons</h4>
                            <p class="tall">Lorem ipsum dolor sit, consectetur adip.</p>
                        </div>
                    </div>
                    <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-desktop"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="shorter">Lightbox</h4>
                            <p class="tall">Lorem sit amet, consectetur adip.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h2>and more...</h2>

            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <i class="icon icon-usd"></i>
                                Pricing Tables
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="accordion-body collapse in">
                        <div class="panel-body">
                            Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                <i class="icon icon-comment"></i>
                                Contact Forms
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="panel-body">
                            Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                <i class="icon icon-laptop"></i>
                                Portfolio Pages
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="accordion-body collapse">
                        <div class="panel-body">
                            Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="tall" />

    <div class="row center">
        <div class="col-md-12">
            <h2 class="short word-rotator-title">
                We're not the only ones
                <strong>
									<span class="word-rotate">
										<span class="word-rotate-items">
											<span>excited</span>
											<span>happy</span>
										</span>
									</span>
                </strong>
                about Porto Template...
            </h2>
            <h4 class="lead tall">5,500 customers in 100 countries use Porto Template. Meet our customers.</h4>
        </div>
    </div>
    <div class="row center">
        <div class="owl-carousel" data-plugin-options='{"items": 6, "singleItem": false, "autoPlay": true}'>
            <div>
                <img class="img-responsive" src="img/logos/logo-1.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-2.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-3.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-4.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-5.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-6.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-4.png" alt="">
            </div>
            <div>
                <img class="img-responsive" src="img/logos/logo-2.png" alt="">
            </div>
        </div>
    </div>

</div>

<div class="map-section">
    <section class="featured footer map">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="recent-posts push-bottom">
                        <h2>Latest <strong>Blog</strong> Posts</h2>
                        <div class="row">
                            <div class="owl-carousel" data-plugin-options='{"items": 1, "autoHeight": true}'>
                                <div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                </div>
                                <div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">12</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">11</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                </div>
                                <div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                    <div class="col-md-6">
                                        <article>
                                            <div class="date">
                                                <span class="day">15</span>
                                                <span class="month">Jan</span>
                                            </div>
                                            <h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="icon icon-angle-right"></i></a></p>
                                        </article>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <h2><strong>What</strong> Client’s Say</h2>
                    <div class="row">
                        <div class="owl-carousel push-bottom" data-plugin-options='{"items": 1, "autoHeight": true}'>
                            <div>
                                <div class="col-md-12">
                                    <blockquote class="testimonial">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat.  Donec hendrerit vehicula est, in consequat.  Donec hendrerit vehicula est, in consequat.</p>
                                    </blockquote>
                                    <div class="testimonial-arrow-down"></div>
                                    <div class="testimonial-author">
                                        <div class="img-thumbnail img-thumbnail-small">
                                            <img src="img/clients/client-1.jpg" alt="">
                                        </div>
                                        <p><strong>John Smith</strong><span>CEO & Founder - Okler</span></p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="col-md-12">
                                    <blockquote class="testimonial">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                    </blockquote>
                                    <div class="testimonial-arrow-down"></div>
                                    <div class="testimonial-author">
                                        <div class="img-thumbnail img-thumbnail-small">
                                            <img src="img/clients/client-1.jpg" alt="">
                                        </div>
                                        <p><strong>John Smith</strong><span>CEO & Founder - Okler</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</div>

<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="footer-ribbon">
                <span>Get in Touch</span>
            </div>
            <div class="col-md-3">
                <div class="newsletter">
                    <h4>Newsletter</h4>
                    <p>Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.</p>

                    <div class="alert alert-success hidden" id="newsletterSuccess">
                        <strong>Success!</strong> You've been added to our email list.
                    </div>

                    <div class="alert alert-danger hidden" id="newsletterError"></div>

                    <form id="newsletterForm" action="php/newsletter-subscribe.php" method="POST">
                        <div class="input-group">
                            <input class="form-control" placeholder="Email Address" name="newsletterEmail" id="newsletterEmail" type="text">
										<span class="input-group-btn">
											<button class="btn btn-default" type="submit">Go!</button>
										</span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-3">
                <h4>Latest Tweet</h4>
                <div id="tweet" class="twitter" data-account-id="">
                    <p>Please wait...</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="contact-details">
                    <h4>Contact Us</h4>
                    <ul class="contact">
                        <li><p><i class="icon icon-map-marker"></i> <strong>Address:</strong> 1234 Street Name, City Name, United States</p></li>
                        <li><p><i class="icon icon-phone"></i> <strong>Phone:</strong> (123) 456-7890</p></li>
                        <li><p><i class="icon icon-envelope"></i> <strong>Email:</strong> <a href="mailto:mail@example.com">mail@example.com</a></p></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-2">
                <h4>Follow Us</h4>
                <div class="social-icons">
                    <ul class="social-icons">
                        <li class="facebook"><a href="http://www.facebook.com/" target="_blank" data-placement="bottom" rel="tooltip" title="Facebook">Facebook</a></li>
                        <li class="twitter"><a href="http://www.twitter.com/" target="_blank" data-placement="bottom" rel="tooltip" title="Twitter">Twitter</a></li>
                        <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" data-placement="bottom" rel="tooltip" title="Linkedin">Linkedin</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-1">
                    <a href="index.html" class="logo">
                        <img alt="Porto Website Template" class="img-responsive" src="img/logo-footer.png">
                    </a>
                </div>
                <div class="col-md-7">
                    <p>© Copyright 2014. All Rights Reserved.</p>
                </div>
                <div class="col-md-4">
                    <nav id="sub-menu">
                        <ul>
                            <li><a href="page-faq.html">FAQ's</a></li>
                            <li><a href="sitemap.html">Sitemap</a></li>
                            <li><a href="contact-us.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</footer>
</div>

<!-- Libs -->
<script src="vendor/jquery.js"></script>
<script src="vendor/jquery.appear.js"></script>
<script src="vendor/jquery.easing.js"></script>
<script src="vendor/jquery.cookie.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/jquery.validate.js"></script>
<script src="vendor/jquery.stellar.js"></script>
<script src="vendor/jquery.knob.js"></script>
<script src="vendor/jquery.gmap.js"></script>
<script src="vendor/twitterjs/twitter.js"></script>
<script src="vendor/isotope/jquery.isotope.js"></script>
<script src="vendor/owl-carousel/owl.carousel.js"></script>
<script src="vendor/jflickrfeed/jflickrfeed.js"></script>
<script src="vendor/magnific-popup/magnific-popup.js"></script>
<script src="vendor/mediaelement/mediaelement-and-player.js"></script>

<!-- Theme Initializer -->
<script src="js/theme.plugins.js"></script>
<script src="js/theme.js"></script>

<!-- Current Page JS -->
<script src="vendor/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="vendor/rs-plugin/js/jquery.themepunch.revolution.js"></script>
<script src="vendor/circle-flip-slideshow/js/jquery.flipshow.js"></script>
<script src="js/views/view.home.js"></script>

<!-- Custom JS -->
<script src="js/custom.js"></script>
</body>
</html>